<template>
     <div class="main">
          <!-- 用户登录 -->
          <div class="Admin">
               <!-- 标题 -->
               <div class="Login_title">
                    <p>初始化后台系统</p>
               </div>
               <p>账号</p>
               <el-input v-model="user" placeholder="请输入你的账号" />
               <p>密码</p>
               <el-input v-model="password" placeholder="请输入你的密码" />

               <el-button v-on:click="Login" style="margin-top:15px"> 登录 </el-button>
          </div>
     </div>
</template>
<script setup>
import { TokenVerify, CreateToken, TokenVerifyTime } from '../service/Token'
import { ElButton, ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import { getVerification, LoginAdmin, Verification_Judgment } from '../service/Login'
import { Load, Clear, SetCookie } from "../style";
import axios from "axios";
import '../assets/media/Login.css'

const user = ref('')
const password = ref('')
const verificationcode = ref('')
// 接受参数
const verificationList = ref()
const verification = reactive(verificationList)
const verification_img = ref()





// onMounted(() => {

//      // 获取验证码
//      getVerification().then((res) => {
//           verification.value = res
//           // 图片获取
//           verification_img.value = verification.value.data[0].verification_img
//      })
// })
// 切换验证码
// const Toggle = () => {
//      // 获取验证码
//      getVerification().then((res) => {
//           verification.value = res
//           // 图片获取
//           verification_img.value = verification.value.data[0].verification_img
//      })
// }
// 登录
const Login = () => {
     // !不能为空
     // if (verificationcode.value == '') {
     //      ElMessage({
     //           message: "请输入验证码!",
     //           type: 'error',
     //      })
     //      return
     // }
     //// 验证码判断
     // ?账号判断
     const data_admin = { User: user.value, PassWord: password.value }
     LoginAdmin(data_admin).then((res) => {
          if (res.code == 200) {
               const data = { User: user.value }
               // Token验证
               TokenVerify(data).then((res) => {
                    //! 将Token保存到本地
                    if (res.code == 200) {
                         SetCookie(res.data[0].token_value)
                         // localStorage.setItem('Token', res.data[0].token_value)
                    } else {
                         // *创造一个Token
                         // const data = { User: user.value }
                         // CreateToken(data).then((res) => {
                         //      SetCookie(res.data[0].token_value)
                         //      // // !将Token保存到本地
                         //      // localStorage.setItem('Token', res.data[0].token_value)
                         // })
                    }
               })
          }
     })
}


</script>

<style>
.Login_title {
     border: 0px solid blue;
     position: relative;
     top: -60px;

}

.Login_title p {
     font-size: 28px;
}

.verification_code {
     display: flex;
     justify-content: center;
     align-items: center;
     align-content: center;
     border: 0px solid blue;
}

.verification_img {
     width: 11vw;
}

p {
     font-family: var(--font-family);
}

.main {
     background: linear-gradient(to bottom, #fff, rgb(168, 230, 255));
     border: 0px solid blue;
     position: absolute;
     z-index: 10000;
     height: 100vh;
     width: 100vw;
     display: flex;
     justify-content: center;
     align-items: center;
     align-content: center;
     justify-items: center;
     overflow-y: hidden;
     overflow-x: hidden;
}

.el-input {
     width: 50%;
     padding: 0px 0px 50px 0px;
}

.Admin {
     flex-direction: column;
     border: 0px solid black;
     width: 30vw;
     height: 60vh;
     display: flex;
     justify-content: center;
     align-items: center;
     align-content: center;
     justify-items: center;

}
</style>